<template>
    <div class="leave-log-query">
        <condition-card
            @reset="reset"
            @search="filterLogList"
            label-width="120px"
            label-position="right"
        >
            <el-row>
                <el-col :span="8">
                    <el-form-item label="年级">
                        <el-date-picker
                            style="width: 100%;"
                            v-model="query.grade"
                            type="year"
                            value-format="yyyy"
                            placeholder="请选择"
                            :picker-options="pickerOptions"
                            @change="currentDptId === '1' ? handleChangeFaculty() : ''"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="学院">
                        <DictSelect
                            labelAll="请选择"
                            v-model="multipeQuery.faculty"
                            filterable
                            :data="options.faculty"
                            @change="handleChangeFaculty"
                            multiple
                        ></DictSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="专业">
                        <DictSelect
                            labelAll="请选择"
                            v-model="multipeQuery.profession"
                            filterable
                            :data="options.profession"
                            multiple
                        ></DictSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="培养层次">
                        <DictSelect
                            labelAll="请选择"
                            v-model="multipeQuery.trainingLevel"
                            :data="options.trainingLevel"
                            multiple
                        ></DictSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="培养类别">
                        <DictSelect
                            labelAll="请选择"
                            v-model="query.trainingCategory"
                            :data="options.trainingCategory"
                        ></DictSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="学位类型">
                        <DictSelect
                            labelAll="请选择"
                            v-model="query.degreeType"
                            :data="options.degreeType"
                            @change="currentDptId !== '1' ? handleChangeFaculty() : ''"
                        ></DictSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="学习形式">
                        <DictSelect
                            labelAll="请选择"
                            v-model="query.formLearning"
                            :data="options.formLearning"
                        ></DictSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="培养完成情况">
                        <DictSelect
                            labelAll="请选择"
                            v-model="query.cultureStatus"
                            :data="options.cultureStatus"
                        ></DictSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="是否获毕业证">
                        <YesNoSelect v-model="query.isGetDiploma" labelAll="请选择" :showAll="false"></YesNoSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="是否获学位证">
                        <YesNoSelect
                            v-model="query.isGetDegreeCertificate"
                            labelAll="请选择"
                            :showAll="false"
                        ></YesNoSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="是否国际学生">
                        <YesNoSelect v-model="query.isOverseas" labelAll="请选择" :showAll="false"></YesNoSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="是否双学位">
                        <YesNoSelect v-model="query.isDoubleDegree" labelAll="请选择" :showAll="false"></YesNoSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="操作类型">
                        <DictSelect
                            labelAll="请选择"
                            v-model="query.operatorType"
                            :data="options.operatorType"
                        ></DictSelect>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="操作时间">
                        <el-row type="flex" justify="center" align="middle">
                            <el-date-picker
                                v-model="multipeQuery.operatorStartTime"
                                value-format="timestamp"
                                type="datetime"
                                :picker-options="pickerOptions1"
                                align="right"
                                placeholder="选择日期时间"
                            ></el-date-picker>
                            <span style="margin: 0 10px;">~</span>
                            <el-date-picker
                                v-model="multipeQuery.operatorEndTime"
                                type="datetime"
                                :picker-options="pickerOptions2"
                                align="right"
                                value-format="timestamp"
                                placeholder="选择日期时间"
                            ></el-date-picker>
                        </el-row>
                    </el-form-item>
                </el-col>
            </el-row>
        </condition-card>
        <el-card shadow="never">
            <h2>离校日志列表</h2>
            <el-row type="flex" algin="middle" class="mb-8px">
                <el-col class="text-left">
                    <!-- <KeywordInput
                        v-model="query.keyWord"
                        @enter="filterLogList"
                        placeholder="学生姓名或学号"
                    ></KeywordInput> -->
                    <el-input
                        style="width:250px"
                        v-model="query.keyWord"
                        :placeholder="$t('score.failScoreManage.pleaseInt')"
                        prefix-icon="el-icon-search"
                        @keyup.enter.native="filterLogList"/>
                </el-col>
                <el-col class="text-right">
                    <el-button @click="exportLeaveLog">导出</el-button>
                </el-col>
            </el-row>
            <edu-table
                :order="false"
                :data="logList.data"
                :total="logList.total"
                @page-change="pageChange"
                @selection-change="handleSelectionChange"
            >
                <el-table-column label="学号" prop="studentId" show-overflow-tooltip></el-table-column>
                <el-table-column label="姓名" show-overflow-tooltip>
                    <template slot-scope="scope">{{scope.row.studentName}}</template>
                </el-table-column>
                <el-table-column label="年级" show-overflow-tooltip>
                    <template slot-scope="scope">{{scope.row.grade}}</template>
                </el-table-column>
                <el-table-column label="学院" show-overflow-tooltip>
                    <template slot-scope="scope">{{scope.row.facultyI18n}}</template>
                </el-table-column>
                <el-table-column label="专业" show-overflow-tooltip>
                    <template slot-scope="scope">{{scope.row.professionI18n}}</template>
                </el-table-column>
                <el-table-column label="培养层次" show-overflow-tooltip>
                    <template slot-scope="scope">{{scope.row.trainingLevelI18n}}</template>
                </el-table-column>
                <el-table-column label="培养类别" show-overflow-tooltip>
                    <template slot-scope="scope">{{scope.row.trainingCategoryI18n}}</template>
                </el-table-column>
                <el-table-column label="学位类型" show-overflow-tooltip>
                    <template slot-scope="scope">{{scope.row.degreeTypeI18n}}</template>
                </el-table-column>
                <el-table-column label="学习形式" show-overflow-tooltip>
                    <template slot-scope="scope">{{scope.row.formLearningI18n}}</template>
                </el-table-column>
                <el-table-column label="是否获毕业证" width="120px" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <div class="text-center">
                            <el-tag
                                :type="scope.row.isGetDiploma*1?'success':'danger'"
                            >{{ getDiploma(scope.row.isGetDiploma*1) }}</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="是否获学位证" width="120px" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <div class="text-center" >
                            <el-tag
                                :type="scope.row.isGetDegreeCertificate*1?'success':'danger'"
                            >{{ getDegreeCertificate(scope.row.isGetDegreeCertificate*1) }}</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="是否国际学生" width="120px" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <div class="text-center" v-if="scope.row.isOverseas">
                            <el-tag
                                :type="scope.row.isOverseas*1?'success':'danger'"
                            >{{ getIsOverseas(scope.row.isOverseas*1) }}</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="是否双学位" width="100px" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <div class="text-center" v-if="scope.row.isDoubleDegreeI18n">
                            <el-tag
                                :type="scope.row.isDoubleDegree*1?'success':'danger'"
                            >{{ scope.row.isDoubleDegreeI18n }}</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作类型" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <div v-if="scope.row.operatorType === '0'">{{ "离校" }}</div>
                        <div v-else-if="scope.row.operatorType === '1'">{{ "撤销" }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作时间" show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.operateTime }}</template>
                </el-table-column>
                <el-table-column label="终端IP" width="100px" show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-button type="text">{{ scope.row.ip }}</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作人" show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.operatorId }}</template>
                </el-table-column>
            </edu-table>
        </el-card>
    </div>
</template>
<script>
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import * as API from "common/src/api/leaveStudents";
export default {
    name: "leaveLogQuery",
    components: {},
    data() {
        return {
            multipeQuery: {
                faculty: [],
                profession: [],
                trainingLevel: [],
                operatorStartTime: "",
                operatorEndTime: ""
            },
            query: {
                grade: "",
                trainingLevel: "",
                faculty: "",
                profession: "",
                trainingCategory: "",
                degreeType: "",
                formLearning: "",
                cultureStatus: "",
                isGetDiploma: "",
                isGetDegreeCertificate: "",
                isOverseas: "",
                isDoubleDegree: "",
                operatorType: "",
                operatorStartTime: "",
                operatorEndTime: "",
                keyWord: "",
                pageNum_: 1,
                pageSize_: 20
            },
            options: {
                trainingLevel: [],
                faculty: [],
                profession: [],
                formLearning: [],
                cultureStatus: [
                    {
                        label: "已完成",
                        value: "1"
                    },
                    {
                        label: "未完成",
                        value: "0"
                    }
                ],
                degreeType: [],
                trainingCategory: [],
                operatorType: [
                    {
                        label: "离校",
                        value: "0"
                    },
                    {
                        label: "撤销",
                        value: "1"
                    }
                ]
            },
            pickerOptions: {
                disabledDate(time) {
                    return (
                        time.getTime() > Date.now() ||
                        time.getTime() < new Date("1978").getTime()
                    );
                }
            },
            pickerOptions1: {
              disabledDate: (time) => {
                if (this.multipeQuery.operatorEndTime != null) {
                  return new Date(time).getTime() > new Date(this.multipeQuery.operatorEndTime).getTime();
                } else {
                  return false;
                }
              }
            },
            pickerOptions2: {
              disabledDate: (time) => {
                return new Date(time).getTime() < new Date(this.multipeQuery.operatorStartTime).getTime();
              }
            },
            primaryIds: [],
            logList: {
                data: [],
                total: 0
            },
            currentDptId: ""
        };
    },
    created() {
        if (this.mockUser) {
            this.currentDptId = this.mockUser.currentManageDptId;
        } else if (this.currentUser) {
            this.currentDptId = this.currentUser.currentManageDptId;
        }
        this.initOptions();
        this.leaveLogList();
    },
    mounted() {},
    methods: {
        // 获取学位证
        getDegreeCertificate(val) {
            return val == 1 ? "是" : "否";
        },
        // 获取毕业证
        getDiploma(val) {
            return val == 1 ? "是" : "否";
        },
        // 获取【是否国际学生】枚举
        getIsOverseas(val) {
            return val == 1 ? "是" : "否";
        },
        // 获取筛选条件字段下拉数据
        initOptions() {
            const data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_YX", "X_PYCC", "X_PYLB", "X_XWLX", "X_XXXS", "K_ZXZT"]
            };
            queryDic(data).then(res => {
                if (res.code === 200) {
                    UTILS.fillSelect(
                        {
                            faculty: "X_YX",
                            trainingLevel: "X_PYCC",
                            trainingCategory: "X_PYLB",
                            degreeType: "X_XWLX",
                            formLearning: "X_XXXS"
                        },
                        res.data,
                        this.options
                    );
                    // 判断是否是管理员还是教务员（当前角色/mock角色）来确定学院
                    // this.getFaculty();
                }
            });
        },
        // 根据学院获取专业
        handleChangeFaculty(val) {
            if (!val.length) {
                this.multipeQuery.profession = [];
                this.options.profession = [];
                return;
            }
            this.options.profession = [];
            this.query.profession = "";
            let facultys, degreeType;
            facultys = this.multipeQuery.faculty;
            degreeType = this.query.degreeType ? [this.query.degreeType] : [];
            const data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["G_ZY"],
                filter: {
                    prefix: facultys,
                    specilaCode: "XY2ZY",
                    facultys: facultys,
                    grade: this.query.grade,
                    degreeType: degreeType
                }
            };
            queryDic(data).then(res => {
                if (res.code === 200)
                    UTILS.fillSelect(
                        {
                            profession: "G_ZY"
                        },
                        res.data,
                        this.options
                    );
                this.options.profession = this.options.profession.map((item) => {
                    return {
                        key: item.value,
                        label: item.label + "(" + item.value + ")",
                        value: item.value
                    }
                })
            });
        },
        getFaculty() {
            let innerRoles = null;
            if (this.mockUser) {
                innerRoles = this.mockUser.innerRoles;
                if (
                    innerRoles &&
                    !innerRoles.includes("1") &&
                    innerRoles.includes("2")
                ) {
                    // this.options.faculty = [{
                    //     label: this.mockUser.facultyI18n,
                    //     value: this.mockUser.faculty
                    // }]
                    this.options.faculty = this.options.faculty.filter(item => {
                        if (this.mockUser.faculty)
                            return item.value === this.mockUser.faculty;
                        else return item;
                    });
                }
            } else {
                innerRoles = this.currentUser.innerRoles;
                if (
                    innerRoles &&
                    !innerRoles.includes("1") &&
                    innerRoles.includes("2")
                ) {
                    // this.options.faculty = [{
                    //     label: this.mockUser.facultyI18n,
                    //     value: this.mockUser.faculty
                    // }]
                    this.options.faculty = this.options.faculty.filter(item => {
                        if (this.currentUser.faculty)
                            return item.value === this.currentUser.faculty;
                        else return item;
                    });
                }
            }
        },
        // 筛选重置方法
        filterLogList() {
            this.query.pageNum_ = 1;
            this.leaveLogList();
        },
        reset() {
            // 多选字段重置
            let multipeQuery = this.multipeQuery;
            let query = this.query;
            for (var key in multipeQuery) {
                if (multipeQuery[key] instanceof Array) multipeQuery[key] = [];
                else multipeQuery[key] = "";
            }
            for (var i in query) {
                if (!i.includes("pageNum_") && !i.includes("pageSize_"))
                    query[i] = "";
            }
            this.options.profession = [];
            this.filterLogList();
        },
        // 离校日志列表
        leaveLogList() {
            // faculty等多选数组转换为字符串
            this.query.faculty = this.multipeQuery.faculty.join(",");
            this.query.profession = this.multipeQuery.profession.join(",");
            this.query.trainingLevel = this.multipeQuery.trainingLevel.join(
                ","
            );
            this.query.operatorStartTime = this.multipeQuery.operatorStartTime
                ? this.multipeQuery.operatorStartTime
                : '';
            this.query.operatorEndTime = this.multipeQuery.operatorEndTime
                ? this.multipeQuery.operatorEndTime
                : '';
            API.getLeaveLogList(this.query).then(res => {
                if (res.code === 200 && res.data) {
                    this.logList.data = res.data.list;
                    this.logList.total = res.data.total_;
                }
            });
        },
        pageChange(val) {
            this.query.pageNum_ = val.pageNum;
            this.query.pageSize_ = val.pageSize;
            this.leaveLogList();
        },
        handleSelectionChange(val) {
            this.primaryIds = val.map(item => {
                return item.id;
            });
        },
        // 导出离校日志
        exportLeaveLog() {
            this.query.operatorStartTime = this.multipeQuery.operatorStartTime
                ? this.multipeQuery.operatorStartTime
                : '';
            this.query.operatorEndTime = this.multipeQuery.operatorEndTime
                ? this.multipeQuery.operatorEndTime
                : '';
            let params = UTILS.clone(this.query);
            params.hasOwnProperty("pageNum_") && delete params.pageNum_;
            params.hasOwnProperty("pageSize_") && delete params.pageSize_;
            // 选中用选中值未选中用列表值
            if (this.primaryIds.length) {
                params.primaryIds = this.primaryIds;
            } else {
                params.primaryIds = [];
            }
            API.exportLeaveLogList(params);
        }
    },
    computed: {
        currentUser() {
            if (this.$store.state.session.user) {
                return this.$store.state.session.user;
            }
            return JSON.parse(localStorage.getItem("user"));
        },
        mockUser() {
            if (this.$store.state.session.mockUser) {
                return this.$store.state.session.mockUser;
            }
            let sessiondata = JSON.parse(localStorage.getItem("sessiondata"));
            if (sessiondata && sessiondata.mockUser) {
                return sessiondata.mockUser;
            }
        }
    }
};
</script>
<style lang="scss" scoped>
// .leave-log-query {
// }
</style>
